<template>
  <view class="chat-container">
    <!-- 聊天消息列表 -->
    <scroll-view
        class="chat-list"
        scroll-y="true"
        :scroll-top="scrollTop"
        :scroll-with-animation="true"
        @scrolltoupper="onScrollToUpper"
    >
      <view class="chat-list-content">
        <view
            v-for="(item, index) in messageList"
            :key="index"
            :class="['message-item', item.type === 'user' ? 'message-user' : 'message-assistant']"
        >
          <!-- 消息内容 -->
          <view class="message-content">
            <text>{{ item.content }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 输入框区域 -->
    <view class="input-container">
      <textarea
          class="input-box"
          v-model="inputMessage"
          :adjust-position="false"
          :cursor-spacing="20"
          :show-confirm-bar="false"
          :maxlength="-1"
          placeholder="请输入消息..."
          @focus="onInputFocus"
          @blur="onInputBlur"
      />
      <view
          class="send-button"
          :class="{ 'active': inputMessage.trim() }"
          @tap="sendMessage"
      >
        发送
      </view>
    </view>
  </view>
</template>

<script>
import { getAnswerMessage } from '../../../api/system/customer'

export default {
  data() {
    return {
      messageList: [], // 消息列表
      inputMessage: '', // 输入框内容
      scrollTop: 0, // 滚动位置
      assistantAvatar: '/static/images/assistant-avatar.png', // 助手头像
      isLoading: false // 是否正在加载
    }
  },

  methods: {
    // 发送消息
    async sendMessage() {
      if (!this.inputMessage.trim() || this.isLoading) return;

      const userMessage = {
        type: 'user',
        content: this.inputMessage.trim()
      };

      // 添加用户消息到列表
      this.messageList.push(userMessage);

      // 清空输入框
      this.inputMessage = '';

      // 滚动到底部
      this.scrollToBottom();

      // 显示加载状态
      this.isLoading = true;

      try {
        // 调用API服务发送消息
        const response = await getAnswerMessage(userMessage.content);
        console.log(response)

        // 添加助手回复
        this.messageList.push({
          type: 'assistant',
          content: response.msg // 假设API返回的数据中包含reply字段
        });

        // 滚动到底部
        this.scrollToBottom();
      } catch (error) {
        console.error('发送消息失败:', error);
        uni.showToast({
          title: error.message || '发送失败，请重试',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    },

    // 调用后端API



    // 滚动到底部
    scrollToBottom() {
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.chat-list-content').boundingClientRect(data => {
          this.scrollTop = data.height;
        }).exec();
      }, 100);
    },

    // 输入框获得焦点
    onInputFocus() {
      this.scrollToBottom();
    },

    // 输入框失去焦点
    onInputBlur() {
      // 可以添加一些失去焦点时的处理
    },

    // 下拉加载更多历史消息
    onScrollToUpper() {
      // 这里可以实现加载历史消息的逻辑
    }
  }
}
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.chat-list {
  flex: 1;
  padding: 20rpx;
}

.message-item {
  display: flex;
  margin-bottom: 30rpx;
  align-items: flex-start;
}

.message-user {
  flex-direction: row-reverse;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin: 0 20rpx;
}

.message-content {
  max-width: 60%;
  padding: 20rpx;
  border-radius: 10rpx;
  word-break: break-all;
}

.message-user .message-content {
  background-color: #1989fa;
  color: #fff;
}

.message-assistant .message-content {
  background-color: #fff;
  color: #333;
}

.input-container {
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: flex-end;
}

.input-box {
  flex: 1;
  min-height: 80rpx;
  max-height: 200rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #f5f5f5;
  font-size: 28rpx;
}

.send-button {
  width: 120rpx;
  height: 80rpx;
  margin-left: 20rpx;
  background-color: #ccc;
  color: #fff;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.send-button.active {
  background-color: #1989fa;
}
</style>
